<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">进货记录</small>
      </a>
      <a class="operation" v-on:click="show = !show">
        <i class="el-icon-setting"></i> 操作
      </a>
  
      <!--dialog-->
      <transition name="fade">
        <div class="operatbox" v-show="show">
          <router-link :to='{name:"Jhjllistupdate",query:{
           unid:this.itemunid
          }}'>修改</router-link>
          <a @click="handleDelete()">删除</a>
        </div>
      </transition>
    </header>
  
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span>  <em>*</em>食品类型</span>
            <div class="froms">
           <el-radio-group v-model="typeradio" >
              <el-radio disabled  :label="0">预包装食品</el-radio>
              <el-radio disabled  :label="1">食用农场品</el-radio>
              <el-radio disabled  :label="2">散装加工食品</el-radio>
            </el-radio-group>
            
            </div>
          </li>
          <li>
            <span><em>*</em>食品类别</span>
            <div class="froms">
              <label>{{listData[0].demandWarehouse.demandType.name}}</label>
            </div>
          </li>
          <li>
            <span><em>*</em>食品名称</span>
            <div class="froms">
              <label>{{listData[0].demandWarehouse.name}}</label>
           
            </div>
          </li>
          <li>
            <span>   <em>*</em>品牌</span>
            <div class="froms">
              <label>{{listData[0].brand}}</label>
           
            </div>
          </li>
          <li>
            <span>   <em>*</em>供应商</span>
            <div class="froms">
              <label>{{listData[0].supplier.supplierName}}</label>
             
            </div>
          </li>
           <li>
            <span> <em>*</em>进库数量</span>
            <div class="froms">
              <label>{{listData[0].num}}</label>
           
            </div>
          </li>
          <li>
            <span><em>*</em>数量单位</span>
            <div class="froms">
              <label>{{listData[0].unit}}</label>
            </div>
          </li>
          <li>
            <span>  <em>*</em>进货日期</span>
            <div class="froms">
              <label>{{listData[0].StockDate|time}}</label>
          
            </div>
          </li>
           <li>
            <span><em>*</em>记录人员</span>
            <div class="froms">
              <label>{{listData[0].recordPersonName}}</label>
            </div>
          </li>
           <li>
            <span><em>*</em>记录时间</span>
            <div class="froms">
              <label>{{listData[0].recordDate|time}}</label>
             
            </div>
          </li>
        </ul>
        <div class="filedetail">
         <p><i class="el-icon-document"></i>查看购票票据，食品合格证明文件</p>
         <ul>
            <li v-for='item of FileDatalist' :unid="item.unid" :path="item.fullPath">
              {{item.fullFileName}}
              <el-button type="primary" icon="search"  size="mini" @click="imgview(item.fullPath)" class="c_f">查看</el-button>
            </li>
          </ul>
            <mt-popup v-model="popupVisible" modal=false class="mint-popup-2 bg_f" >
               <img src='' id="imgInit">
           </mt-popup>
        </div>  
      </div>
    </main>
  </div>
</template>

<script>
 
  import {DemandCertificate} from '../../api/api';
  import {FileData}from '../../api/api';
  import { Popup } from 'mint-ui';
  import {DemandCertificateDelete} from '../../api/api';
  
 // import {DemandCertificateOutputDetail} from '../../api/api';
  export default {
    components: {
    'mt-popup':Popup,
    },
    data() {
      return {
        listData: {},
        typeradio:'',
        show: false,//默认隐藏
        itemunid:this.$route.query.unid,
        FileDatalist:[],
        popupVisible:false,
      };
    },
    methods: {
      //数据加载方法
       getData() {
        //定义需要传给通讯的参数： unid    
       this.PageSize= 1;
        //定义需要传给通讯的参数：QueryData{"PageSize":10,"CurrentPage":1,"Query":{"CriteriaList":[]}}和userunid    
        let varCriteriaList={
            Name: 'Unid',
            Value:this.$route.query.unid,
            Operate: 'Equal',
            DataType: null,
            EndSuffix: '',
            Suffix: null
        }
        let varQueryData = {
          PageSize: this.PageSize,
          CurrentPage: 1,
          Query: {
                 CriteriaList:[],
          }
        }
        varQueryData.Query.CriteriaList.push(varCriteriaList)//往数组里面添加对象
        let options = {
          params: {
            UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
            QueryData: JSON.stringify(varQueryData)
          }
        }
        //调取接口
        DemandCertificate(options).then((res) => {
          if (res.success === true) {
            this.listData = res.data;
            this.typeradio=this.listData[0].type
          }
        })
      },
      //删除方法
      handleDelete() {
      let deletParams={
         params: {
            unids:this.$route.query.unid,
          }
      }
       this.$confirm('是否删除此条信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      DemandCertificateDelete(deletParams).then((res) => {
            if (res.success===true) {
                this.$message.success('删除成功');
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
        });
      });
    },
    //获取file
    getfilelist() {
      let FileDataparam = {
        params: {
          MainDataUnid:this.$route.query.unid,
          PageSize: 100,
          CurrentPage: 1
        }
      }
      FileData(FileDataparam).then((res) => {
        if (res.success === true) {
          this.FileDatalist = res.data;
        }
      })
    },
    //查看图片
      imgview: function(path) {
      this.popupVisible=true 
      var adres="http://112.111.0.6:922/" + path;
      document.getElementById('imgInit').src = adres;
    },
    },
    created() {
      this.getData();
      this.getfilelist()
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .filedetail{
    p{
      padding:5px;
    }
  }
</style>
